import React from 'react';
import styled from 'styled-components';
import Icon from './Icon';

const SectionWrapper = styled.div`
    display: flex;
    justify-content: flex-end;
    margin: 15px 0;
`;

const SectionContent = styled.div`
    width: 90vw;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #BDBDBD;
    &.outcome {
        border-bottom: 2px solid #35D06C;
    }
    &.income {
        border-bottom: 2px solid #D92027;
    }
    > svg {
        height: 24px;
        width: 24px;
    }
    > label {
         font-size: 1.2em;
         font-weight: bold;
         color: #999999;
    }
`;

type Props = {
    iconName: string,
    labelName: string
}

const OptionSection: React.FC<Props> = (props: any) => {
    return (
        <SectionWrapper>
            <SectionContent className={props.iconName}>
                <Icon name={props.iconName}/>
                <label>{props.labelName}</label>
                {props.children}
            </SectionContent>
        </SectionWrapper>
    );
};

export default OptionSection;